<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <link rel="dns-prefetch" href="//litten.me">
  <title>Litten的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="华中科技大学09级，就职于腾讯SNG。擅长各项前端技能，深入研究移动端开发与前端性能。非专业视觉设计师。此为博客一枚。">
<meta property="og:type" content="website">
<meta property="og:title" content="Litten的博客">
<meta property="og:url" content="//litten.me/page/6/index.html">
<meta property="og:site_name" content="Litten的博客">
<meta property="og:description" content="华中科技大学09级，就职于腾讯SNG。擅长各项前端技能，深入研究移动端开发与前端性能。非专业视觉设计师。此为博客一枚。">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Litten的博客">
<meta name="twitter:description" content="华中科技大学09级，就职于腾讯SNG。擅长各项前端技能，深入研究移动端开发与前端性能。非专业视觉设计师。此为博客一枚。">
  
    <link rel="alternative" href="/atom.xml" title="Litten的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/assets/img/favicon.ico">
  
  <link rel="stylesheet" href="/main.css?v=4.0.0.css">
  

</head>

<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			<img src="/assets/blogImg/litten.png" class="js-avatar">
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">Litten</a></h1>
		</hgroup>

		
		<p class="header-subtitle">胆小认生，不易相处</p>
		

		<nav class="header-menu">
			<ul>
			
				<li><a href="/">主页</a></li>
	        
				<li><a href="/photos">相册</a></li>
	        
			</ul>
		</nav>
		<nav class="header-smart-menu">
	        
    		
    			
    			<a data-idx="0" q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
    			
    			
            
    			
            
    			
    			<a data-idx="1" q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
    			
    			
            
		</nav>
		<nav class="header-nav">
			<div class="social">
				
					<a class="github" target="_blank" href="https://github.com/litten" title="github"><i class="icon-github"></i></a>
		        
					<a class="weibo" target="_blank" href="http://weibo.com/litten225" title="weibo"><i class="icon-weibo"></i></a>
		        
					<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
		        
			</div>
		</nav>
	</header>		
</div>

    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"><i class="icon-sort"></i></div>
  		<h1 class="header-author js-mobile-header hide">Litten</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="/assets/blogImg/litten.png" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">Litten</h1>
			</hgroup>
			
			<p class="header-subtitle">胆小认生，不易相处</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/photos">相册</a></li>
		        
		        
		        	<li><a href="/archives">所有文章</a></li>
		        
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/litten" title="github"><i class="icon-github"></i></a>
			        
						<a class="weibo" target="_blank" href="http://weibo.com/litten225" title="weibo"><i class="icon-weibo"></i></a>
			        
						<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>

      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            
  
    <article id="post-my2013" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/02/05/my2013/">我的2013下半年</a>
    </h1>
  

        <a href="/2014/02/05/my2013/" class="archive-article-date">
  	<time datetime="2014-02-04T18:55:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-02-05</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <ol>
<li>自学了日语，今年考级。小时爱吃红富士苹果，大了向往富士山，但愿今年或明年能说走咱就走</li>
<li>经历了车祸，灾难面前无能为力，但也没有想象的恐怖</li>
<li>第一次骑马，自驾车游。想像中的速度与激情也只是有边界的飞行与欢愉。我还想去更远的地方</li>
<li>看完了《金瓶梅词话》崇祯原版，近年书籍中此本给我的震撼和思考最多</li>
<li>无悔的加盟了腾讯</li>
<li>较熟练的掌握了第一门乐器，当然“熟练”的说法是给自己的评语…他们一般说的扰民不好</li>
<li>毕业第二天就丢了毕业证，学位证，手提电脑以及四年的资料与照片。那段时间诸事不顺，事后我爸分析说我生性随意，穿的袜子一黑一白导致的风水不调</li>
<li>把村上春树三部曲过了一遍，不再那么抵触他了，但远远还不能感受到你们说的“行文如风”</li>
<li>之前不太看电视剧，用尝试性的心态看了韩剧，英剧，美剧，日剧，各一。终于跟我很潮的外婆找到了共同话题，赶上了她这辆飞奔的“三零后”列车</li>
<li>那些尝试过，但没毅力坚持下来的事情：手绘和轮滑（此处真诚检讨但不打算改…）</li>
<li>年末搭上3D建模的末班车，并疯狂喜欢上。用的Maya，还不算熟练，但相信很快会okay。不要叫我弄PS了，我已从二次元奔向三次元</li>
<li>第一次单独旅行。虽然一直迷路，虽然没有星星点灯照亮我的前程。但是，爽，够了</li>
<li>第一次给家里买礼物，带的小米盒子，叫我妈猜有什么用，她说是暖手宝宝。后来整个春节她不亦乐乎的拉着我看了第五遍的爸爸去哪儿</li>
<li>毕业时设计了学院的毕业衫，这也意味着暂时告别了心爱的设计领域。但总觉得我的设计生涯一片无悔</li>
<li>拖延症越发严重，英语能力下降，没坚持锻炼身体，胆小认生，按时睡觉也会有超大黑眼圈。感觉这不是小事记一下吧</li>
<li>用node-webkit完成了自己第一款独立开发并发布的软件。无感。</li>
<li>成为了真正意义上的web前端工程师，佩服于henry和brad的专业学识，并感谢你们对我的严厉与宽容。</li>
<li>我终于失去了你/在拥挤的人群中/我终于失去了你/当我的人生第一次感到光荣</li>
</ol>
<p>The End.<br>——litten 02.05 深夜。</p>

      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/02/05/my2013/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-lock-me-in-a-cup" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/01/10/lock-me-in-a-cup/">把自己锁在杯子里</a>
    </h1>
  

        <a href="/2014/01/10/lock-me-in-a-cup/" class="archive-article-date">
  	<time datetime="2014-01-10T12:30:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-01-10</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>杯子里的一条鱼<br>你可担心<br>会有天外扑来的龙卷风<br>把你的魂魄摄出领地？<br>泳池温热，心脏被灌了风，开垦者默言而卧<br>涛声隐隐作痛<br>若是一壶热酒浇下，由西向东<br>你是缱绻醉倒？还是鱼跃入梦？                                </p>
<p>—— 01.10</p>

      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/药别停/">药别停</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/01/10/lock-me-in-a-cup/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-no-one-used-pro" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2013/12/20/no-one-used-pro/">如何成功做出一款没人使用的产品</a>
    </h1>
  

        <a href="/2013/12/20/no-one-used-pro/" class="archive-article-date">
  	<time datetime="2013-12-20T03:55:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2013-12-20</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>1、 logo金属化，而且是重金属。给人朋克风范，炫酷感觉。第一眼就有被闪电晃过灵魂的错觉，这样子就对了。</p>
<p>2、无限循环的播放背景音乐。不需要设置关闭，你只需要坚持自我。</p>
<p>3、注册的界面，输入密码的文字框一般有两个：填密码和确认密码的。我们可以做5个，让他们再再确认，这样可以体现你无微不至的情怀。情怀你懂吗？</p>
<p>4、注册新用户名的时，先把数据检测一下。并提示：你确定用户名不带火星文吗？用户点了否，再提示：那特殊符号也不用❤★※←＆♂吗？如果用户还是点了否，你要做出这样的符号表情来表示不理解：~&gt;_&lt;~</p>
<p>5、要有“意见反馈”的功能，但是，无论用户提交了什么有价值的意见，甚至用户觉得这建议太美好了以至于自己都high了起来。一律不回。</p>
<p>6、给用户黑名单里面的人都发个消息：“TA给你加了黑名单我偷偷告诉你，你别告诉TA哦”。</p>
<p>7、安装程序时，要勾上“同意以上条款，并背诵全文”。</p>
<p>8、所有文案只写一半，刚引起用户兴趣就戛然而止，记住你是风一般的产品经理。</p>
<p>9、</p>
<p>The End.</p>

      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/药别停/">药别停</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2013/12/20/no-one-used-pro/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-something-about-immersion" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2013/11/07/something-about-immersion/">谈谈人为何会沉迷游戏？</a>
    </h1>
  

        <a href="/2013/11/07/something-about-immersion/" class="archive-article-date">
  	<time datetime="2013-11-07T10:55:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2013-11-07</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>为何人会沉迷？这个模型很有意思。</p>
<p><img src="/assets/blogImg/immersion.png" alt="沉浸的模型"></p>
<blockquote>
<p>当人在“得到技能提升”和“获得挑战后的成就感”这两者中得到一定平衡时，就会陷入沉迷，这个平衡的范围称之为“心流”（flow）。人处在心流状态下，就会陷入沉迷。              </p>
</blockquote>
        <a class="article-more-a"  href="/2013/11/07/something-about-immersion/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/产品/">产品</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2013/11/07/something-about-immersion/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-handling-asynchronous-js" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2013/10/06/handling-asynchronous-js/">统一处理异步的js回调</a>
    </h1>
  

        <a href="/2013/10/06/handling-asynchronous-js/" class="archive-article-date">
  	<time datetime="2013-10-06T02:55:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2013-10-06</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>js编程时经常会用到异步处理，而异步会带了所谓的并发问题。比如，你需要向服务器发出多个ajax请求，然后在返回所有结果后做进一步处理，同时要显示动画。因此我们需要用到以下的方案。<br>
        <a class="article-more-a"  href="/2013/10/06/handling-asynchronous-js/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/">js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2013/10/06/handling-asynchronous-js/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-web-worker-learning" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2013/09/25/web-worker-learning/">web worker简易入门</a>
    </h1>
  

        <a href="/2013/09/25/web-worker-learning/" class="archive-article-date">
  	<time datetime="2013-09-25T02:55:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2013-09-25</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>js是单线程的语言，由于此特性，我们在处理并发时需要用到一些技巧，如setTimeout()，setInterval()，调用XMLHttpRequest等。<br>但这里的并发只是非阻塞（参照John Resig的文章<a href="http://ejohn.org/blog/how-javascript-timers-work/">How JavaScript Timers Work</a>），真正的多线程编程则需要HTML5的web worker。<br>
        <a class="article-more-a"  href="/2013/09/25/web-worker-learning/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2013/09/25/web-worker-learning/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-my-fairy-tale2" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2013/09/10/my-fairy-tale2/">【梦中的小偷】【织梦人的表白】</a>
    </h1>
  

        <a href="/2013/09/10/my-fairy-tale2/" class="archive-article-date">
  	<time datetime="2013-09-10T02:55:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2013-09-10</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><strong>【梦中的小偷】</strong></p>
<p>花店的姑娘喜欢他已经很久了，但羞涩的夜雾总是阻隔着她的心事。警察喜欢姑娘也已经很久了，他勇敢正义，在她面前却像小偷一般。每天他们回家时，都会相向经过小巷，这是一条他们都愿意迷失的归途。撑着油纸伞，渐行渐近的，是彼此瑟缩的心跳。姑娘的长发芬芳如兰，飘散如霓，一如晚风扫过梦境，一个不经意的眼神，两人如同触电一般的回避，丘比特躲在墙角呵呵呵的笑…但这个心事，大家都没有说破。<br>
        <a class="article-more-a"  href="/2013/09/10/my-fairy-tale2/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2013/09/10/my-fairy-tale2/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-oauth-rabbit" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2013/08/20/oauth-rabbit/">兔子，胡萝卜与OAuth的故事</a>
    </h1>
  

        <a href="/2013/08/20/oauth-rabbit/" class="archive-article-date">
  	<time datetime="2013-08-20T04:55:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2013-08-20</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><img src="/assets/blogImg/rabbit.jpg" alt="来搞一记Oauth吧"> </p>
<blockquote>
<p>那些简单的故事，就别用复杂的方式传诵</p>
</blockquote>
<p>##<strong>【让我来讲几个故事吧】</strong>     </p>
<p>从前，有只老兔子，在仓库里存了一万根胡萝卜，作为给小兔子的遗产。而后他就去周游世界了。小兔子有天想去把萝卜拿出来，却被仓库外的一只兔子拦住了。一问才知道，这是老兔子安排的仓库守卫。和所有故事中的守护者一样，他正直而古板，八字眉下面有着睡眠不足的熊猫眼，世人一般称他为兔门神。兔子想要拿到萝卜，就得说服兔门神呀，于是他走了上前…<br>
        <a class="article-more-a"  href="/2013/08/20/oauth-rabbit/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2013/08/20/oauth-rabbit/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="/page/5/">&laquo; Prev</a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/">4</a><a class="page-number" href="/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/page/7/">7</a><a class="page-number" href="/page/8/">8</a><a class="extend next" rel="next" href="/page/7/">Next &raquo;</a>
    </nav>
  


          </div>
        </div>
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2016 Litten
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>
    </div>
    <script>
	var yiliaConfig = {
		mathjax: false,
		isHome: true,
		isPost: false,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: true,
		root: "/",
		innerArchive: true
	}
</script>

<script src="/./main.js?v=4.0.0.js"></script>


    
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-wrap">
    
    	<section class="tools-section tools-section-all" q-show="innerArchive">
        <div class="search-wrap">
          <input class="search-ipt" q-model="search" type="text" placeholder="find something…">
          <i class="icon-search icon" q-show="search|isEmptyStr"></i>
          <i class="icon-close icon" q-show="search|isNotEmptyStr" q-on="click:clearChose(e)"></i>
        </div>
        <div class="widget tagcloud search-tag">
          <p class="search-tag-wording">tag:</p>
          <label class="search-switch">
            <input type="checkbox" q-on="click:toggleTag(e)" q-attr="checked:showTags">
          </label>
          <ul class="article-tag-list" q-show="showTags">
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">js</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">html5</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">设计</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">杂谈</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">游戏</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">旧事</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">coffeescript</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">web</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">旅行</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">css</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">css3</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">工具</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">chrome</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">生活</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">安全</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">黑科技</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">octopress</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">浏览器</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">主题</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">hexo</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">经验</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">产品</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">前端</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">github</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">药别停</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">模式</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">性能</a>
              </li>
            
            <div class="clearfix"></div>
          </ul>
        </div>
        <ul class="search-ul">
          <p q-show="jsonFail" style="padding: 20px; font-size: 12px;">
            缺失模块。<br/>1、在博客根目录（注意不是yilia根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
            2、在根目录_config.yml里添加配置：
<pre style="font-size: 12px;" q-show="jsonFail">
  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true
</pre>
          </p>
          <li class="search-li" q-repeat="items" q-show="isShow">
            <a q-attr="href:path|urlformat" class="search-title"><i class="icon-quo-left icon"></i><span q-text="title"></span></a>
            <p class="search-time">
              <i class="icon-calendar icon"></i>
              <span q-text="date|dateformat"></span>
            </p>
            <p class="search-tag">
              <i class="icon-price-tags icon"></i>
              <span q-repeat="tags" q-on="click:choseTag(e, name)" q-text="name|tagformat"></span>
            </p>
          </li>
        </ul>
    	</section>
    

    

    
    	<section class="tools-section tools-section-me" q-show="aboutme">
  	  	
  	  		<div class="aboutme-wrap" id="js-aboutme">Litten，&lt;br&gt;毕业于华科，就职于鹅厂&lt;br&gt;&lt;br&gt;热爱大海与冷笑话，&lt;br/&gt;目前是一枚前端&lt;br/&gt;&lt;br/&gt;胆小认生，不易相处，&lt;br&gt;年轻无为，卖马为生。</div>
  	  	
    	</section>
    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>
</body>
</html>